<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登记新图书页面</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js"></script>
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <style>
        body{
            background-color: #c5d7f2;
        }

        div[class="container"] {
            margin-top: 50px;
            text-align: center;
        }

        label{
            display: inline-block;
            padding: 3px 6px;
            text-align: right;
            width: 130px;
        }

        input[type=text], input[type=password], input[type=number], input[type=file] {
            width: 50%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            background-color: white;
        }

        button[type=submit] {
            width: 30%;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin-top: 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button[type=submit]:hover {
            background-color: #45a049;
        }
    </style>
    <script>
        function validateForm(){
            let x = document.forms["input"]["name"].value;
            let y = document.forms["input"]["author"].value;
            let z = document.forms["input"]["press"].value;
            let num = document.forms["input"]["number"].value;
            let file = document.forms["input"]["picture"].value;
            if (x==null || x === ""){
                alert("图书名称不能为空");
                return false;
            }
            if (y==null || y === ""){
                alert("作者不能为空");
                return false;
            }
            if (z==null || z === ""){
                alert("出版社不能为空");
                return false;
            }
            if (num==null || num === ""){
                alert("库存数量不能为空");
                return false;
            }
            if (num<=0){
                alert("库存数量需要大于等于0");
                return false;
            }
            if (file==null || file === ""){
                 alert("未上传图书封面图片");
                 return false;
            }
            alert("提交成功！");
        }
    </script>
</head>
<body>
<form role="form" name="input" onsubmit="return validateForm()">
    <div class="container">
        <div class="form-group">
            <label for="name">图书名称</label>
            <input type="text" class="form-control" id="name" placeholder="请输入名称">
        </div>
        <div class="form-group">
            <label for="author">作者</label>
            <input type="text" class="form-control" id="author" placeholder="请输入作者">
        </div>
        <div class="form-group">
            <label for="press">出版社</label>
            <input type="text" class="form-control" id="press" placeholder="请输入出版社">
        </div>
        <div class="form-group">
            <label for="date">出版日期</label>
            <!-- readonly代表是否为禁用输入 -->
            <input type="text" id="date" class="form-control" value="请选择日期" readonly required>
        </div>
        <div class="form-group">
            <label for="number">库存数量</label>
            <input type="number" class="form-control" id="number" placeholder="请输入数量">
        </div>
        <div class="form-group">
            <label for="picture">选择图书封面图片</label>
            <input type="file" id="picture">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </div>
</form>

<script type="text/javascript">
    /* 初始化插件  */
    $(function () {
        $("#date").datetimepicker({
            forceParse: 0,//设置为0，时间不会跳转，会显示当前时间。
            format: 'yyyy-mm-dd', // 展现格式
            initialDate: new Date(),//初始化当前日期
            autoclose: true, // 选择日期后关闭
            // 选择器打开之后首先显示的视图
            // 0表示分钟(默认),1表示小时,2表示天,3表示月,4表示年
            startView: 4,
            // 选择器所能够提供的最精确的时间选择视图
            // 0表示分钟(默认),1表示小时,2表示天,3表示月,4表示年
            minView: 2,
            language: 'zh-CN', //显示语言为中文
            todayBtn: true, //显示今日按钮
            todayHighlight: 1,
            //endDate : new Date(),
        });
        $("#date").datetimepicker("setDate", new Date());  //设置显示默认当天的时间
        $('#date').datetimepicker('setEndDate', new Date());
    });
</script>
</body>
</html>